<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div v-if="ind == 1" class="boxLogin f f-a-c f-j-c">
			<div class="topTit">
				<div class="name">Update password</div>
				<div class="count">Must include at least one symbol or number and have at least 8 characters.</div>
				<div class="inpBox">
					<div class="inpTit">Password</div>
					<input type="password" class="inp" placeholder="Create new password" v-model="password" name="" id="" />
				</div>
				<div class="inpBox">
					<div class="inpTit">Confirm password</div>
					<input type="password" class="inp" placeholder="Re-enter your password" v-model="confirmPassword" name="" id="" />
				</div>
				<!-- btn -->
				<div style="margin-bottom: 80px" @click="endMessage" class="btn hand">Update</div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let password = ref("");
	let ind = ref(1);
	let confirmPassword = ref("");
	onMounted(() => {
		window.addEventListener("scroll", handleScroll);
	});
	const endMessage = () => {};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
